<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:t="http://myfaces.apache.org/tomahawk"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="custom-style.css" />
        <h:outputScript library="js" name="ga.js" />
    </h:head>
    <h:body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span> <span
                            class="icon-bar"></span> <span class="icon-bar"></span> <span
                            class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">pf4j-web-demo</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="plugins.xhtml">Plugins</a></li>
                        <li><a href="about.xhtml">About</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>

        <div class="container">

            <div class="starter-template">
                <h1>Person Repo</h1>
                <h:form>
                    <div class="btn-group" style="float: right;">
                        <button type="button" class="btn btn-success dropdown-toggle"
                                data-toggle="dropdown">
                            Download All <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <ui:repeat value="#{personMBean.plugins}" var="plugin">
                                <li><h:commandLink
                                        action="#{personMBean.downloadAll(plugin)}">
                                        <h:outputText value="#{plugin.name}" />
                                    </h:commandLink></li>
                            </ui:repeat>
                        </ul>

                    </div>
                </h:form>
                <h:dataTable value="#{personMBean.personList}" var="p"
                             styleClass="table table-striped">

                    <h:column>
                        <!-- column header -->
                        <f:facet name="header">Fist Name</f:facet>
                        <!-- row record -->
                        #{p.firstName}
                    </h:column>

                    <h:column>
                        <f:facet name="header">Last Name</f:facet>
                            #{p.lastName}
                    </h:column>

                    <h:column>
                        <f:facet name="header">Age</f:facet>
                            #{p.age}
                    </h:column>

                    <h:column>
                        <f:facet name="header">City</f:facet>
                            #{p.address}
                    </h:column>

                    <h:column>
                        <f:facet name="header">Download/Format</f:facet>
                        <h:form>
                            <ui:repeat value="#{personMBean.plugins}" var="plugin">
                                <h:commandLink action="#{personMBean.download(p,plugin)}">
                                    <h:outputText value="#{plugin.name}" />
                                </h:commandLink>&nbsp;&nbsp;
                            </ui:repeat>
                        </h:form>
                    </h:column>


                </h:dataTable>
            </div>

            <div class="alert alert-info">
                You can found plugins to install <a
                    href="https://github.com/rmrodrigues/pf4j-web-demo/tree/master/plugins">here</a>.
                Donwload and upload on plugin's page.
            </div>

        </div>
        <!-- /.container -->
        <div id="footer" class="navbar navbar-inverse navbar-fixed-bottom">
            <div class="container">
                <p class="text-muted">
                    © <a href="https://github.com/rmrodrigues">RMRodrigues</a> 2014
                </p>
            </div>
        </div>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet"
              href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

        <!-- Optional theme -->
        <link rel="stylesheet"
              href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />

        <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script
        src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    </h:body>

</ui:composition>